<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./templatePrincipal.xhtml">

            <ui:define name="top">
                <center>

                    <p:graphicImage value="/img/2.jpg " width="1300" height="150"/>
                </center>
            </ui:define>

            <ui:define name="left">

            </ui:define>

            <ui:define name="content">
                <f:view>
                    <h:form>

                        <p:panel header="Crear / Editar Usuario"> 
                            <h:panelGrid columns="3">
                                <h:outputLabel value="Nombre:" for="nombre" />
                                <p:inputText id="nombre" value="#{usuarioBean.usuario.nombre}" title="La primera letra mayuscula" required="true" requiredMessage="The Nombre field is required.">
                                    <p:tooltip for="nombre" showEvent="focus" hideEvent="blur" />  
                                    <f:validateLength minimum="3"/> 
                                    <f:validateRegex pattern="^[A-Za-z\s]+$" /> 
                                </p:inputText>
                                <p:message for="nombre" display="icon"/>  


                                <h:outputLabel value="Apellido Paterno:" for="apaterno" />
                                <p:inputText id="apaterno" value="#{usuarioBean.usuario.apaterno}" title="La primera letra mayuscula" required="true" requiredMessage="The Apaterno field is required.">
                                    <p:tooltip for="apaterno" showEvent="focus" hideEvent="blur" />  
                                    <f:validateLength minimum="3" />  
                                    <f:validateRegex pattern="^[A-Za-z\s]+$" /> 
                                </p:inputText>
                                <p:message for="apaterno" display="icon"/>  


                                <h:outputLabel value="Apellido Materno:" for="amaterno" />
                                <p:inputText id="amaterno" value="#{usuarioBean.usuario.amaterno}" title="La primera letra mayuscula" />
                                <p:tooltip for="amaterno" showEvent="focus" hideEvent="blur" />  

                                <h:outputLabel value="Direccion:" for="direccion" />
                                <p:inputText id="direccion" value="#{usuarioBean.usuario.direccion}" title="Calle y numero" required="true" requiredMessage="The Direccion field is required."/>
                                <p:tooltip for="direccion" showEvent="focus" hideEvent="blur" />  

                                <h:outputLabel value="Telefono:" for="telefono" />
                                <p:inputMask id="telefono" value="#{usuarioBean.usuario.telefono}" mask="(99)99-99-99" title="Telefono" />


                                <h:outputLabel value="Correo:" for="correo" />
                                <p:inputText id="correo" value="#{usuarioBean.usuario.correo}" title="Correo" />


                                <h:outputLabel value="Fecha:" for="fecha" />
                                <p:calendar id="popupCal" value="#{usuarioBean.usuario.fecha}" title="Fecha" required="true" requiredMessage="The Fecha field is required."/>
                                <h:outputText value="#{usuarioBean.usuario.fecha}" id="popupDate">  
                                    <f:convertDateTime pattern="MM/dd/yyyy" />
                                </h:outputText>  

                                <h:outputLabel value="Hora:" for="hora" />
                                <p:inputMask id="hora" value="#{usuarioBean.usuario.hora}" mask="99:99:99" title="Hora" required="true" requiredMessage="The Hora field is required.">
                                    <f:convertDateTime pattern="HH:mm:ss" />

                                </p:inputMask>
                                <h:outputLabel value="Estado:" for="estado" />
                                <p:inputText id="estado" value="#{usuarioBean.usuario.estado}" title="Estado" required="true" requiredMessage="The Estado field is required."/>
                                <h:outputLabel value="Acreditado:" for="acreditado" />
                                <p:inputText id="acreditado" value="#{usuarioBean.usuario.acreditado}" title="Acreditado" required="true" requiredMessage="The Acreditado field is required."/>

                                <p:commandButton value="Aceptar" action="UsuarioConfirmar" ajax="false" />

                                <p:commandButton value="Cancelar" action="UsuarioLista" immediate="true"/>


                            </h:panelGrid>
                        </p:panel>
                    </h:form>
                </f:view>

            </ui:define>

        </ui:composition>

    </body>
</html>
